<template>
    <van-sticky>
        <van-nav-bar
            title="优惠卷"
            left-text="返回"
            left-arrow
            placeholder
            @click-left="onBack"
            
        />
    </van-sticky>
    <div class="coupon_list">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
                    <div class="coupon_item" v-for="item in list" :key="item.id" :title="item.title">
                        <div class="item_content">
                            <router-link :to="{path:'/coupon/info',query:{cid:item.id}}">
                                <div class="left">{{ item.rate * 100 }}<span>折</span></div>
                                <div class="right">
                                    <div>{{ item.title }}</div>
                                    <div>订单满<span>100元</span>打<span>8折</span></div>
                                    <div>仅剩 {{ item.total }} 张</div>
                                    <div>领取后{{ item.endtime_date }}内有效</div>
                                </div>
                            </router-link>
                        </div>
                        <div class="receive">
                            <button class="false_btn" v-if="item.status == 0">已失效</button>
                            <button class="false_btn" v-else-if="item.collection_status == true && item.status == 1">已领取</button>
                            <button class="right_btn" v-else-if="item.collection_status == false && item.status == 1" @click="onclick(item.id)">立即领取</button>
                        </div>
                    </div>
        
            </van-list>
        </van-pull-refresh>
    </div>
  
    <Tabbar />
</template>
  
<script setup> 
    const { proxy } = getCurrentInstance();
    const business = proxy.$business;
    console.log(business.value);
    

    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);
    const page = ref(1);

    const onRefresh = () =>
    {
        list.value = [];
        page.value = 1;
        refreshing.value = true;
        finished.value = false;
        loading.value = true;

        setTimeout(onLoad,1500);
    }

    const onLoad = async () =>
    {
        if(refreshing.value === true)
        {
            refreshing.value = false;
        }

        let params = {
            page:page.value,
            busid:business.value.id
        }

        let result = await proxy.$http.post({
            url:'/coupon/index',
            params
        })

        finished.value = false;
        loading.value = false;

        if(result.code === 1)
        {
            let count = result.data.count ?? 0;
            list.value = list.value.concat(result.data.list);

            if(list.value.length == count)
            {
                finished.value = true;

                return false;
            }

            page.value = page.value + 1;

        }else{
            finished.value = true;
            proxy.$warning(result.msg);
        }
    }

const onclick = async (couponid) =>
{
    if(!business.value.id || Object.getOwnPropertyNames(business.value).length === 0)
    {
        proxy.$confirm({
            title:'登录',
            message:'是否跳转登录界面？'
        }).then(() => {
            proxy.$stores.redirect = {
                path:'/coupon/info',
                params:{
                    cid: couponid,
                }
            };
            proxy.$router.push({
                path:'/business/login',
                replace:true
            })
        }).catch((err) => {});
    }else{
        
        let params = {
            cid: couponid,
            busid: business.value.id
        }

        let result = await proxy.$http.post({
            url: '/Coupon/receive',
            params
        })
        if(result.code === 1){
            proxy.$showSuccessToast(result.msg)

            const itemIndex = list.value.findIndex(item => item.id === couponid);
            if (itemIndex !== -1) {
                list.value[itemIndex].collection_status = true;
                list.value[itemIndex].status = 1;
            }

        }else{
            proxy.$warning(result.msg)
            const itemIndex = list.value.findIndex(item => item.id === couponid);
            if (itemIndex !== -1) {
                list.value[itemIndex].collection_status = true;
                list.value[itemIndex].status = 1;
            }
        }
    }
}
    
const onBack = () => proxy.$router.back();
</script>
  
<style scoped>
    @import url('/assets/css/CouponIndex.css');
</style>